<template>
  <view class="member-container">
    <scroll-view class="member-scroll" scroll-y>
      <view class="banner" @click="$u.route('/pages/user/record/record')">
        <view class="member-number">
          <view class="">No.{{ userInfo.number }}</view>
          <view class="">明细</view>
        </view>
        <view style="margin-top: 10rpx">账户余额</view>
        <view class="member-bottom">
          <view class="member-price">￥{{ balance }}</view>
          <view style="font-size: 24rpx">
            <view>充值本金￥{{ userInfo.rechargeBalance }}</view>
            <view>商家赠送￥{{ userInfo.giftBalance }}</view>
          </view>
        </view>
      </view>

      <view style="line-height: 100rpx; font-size: 30rpx; font-weight: 600"
        >储值有礼</view
      >
      <view class="check-member flex flex--wrap">
        <view
          :class="{ active: isSelect === index }"
          v-for="(item, index) in balanceList"
          :key="item.id"
          @click="onCheck(item, index)"
        >
          <view style="padding-top: 10rpx; font-size: 24rpx">
            ￥
            <text style="font-size: 40rpx; font-weight: 600">{{
              item.amount
            }}</text>
          </view>
          <view style="padding-top: 10rpx; font-size: 24rpx"
            >售价{{ item.depositMoney }}</view
          >
          <!-- 赠券 -->
          <view class="gift-box" v-if="item.couponCount > 0"
            >赠券 × {{ item.couponCount }}</view
          >
      </view>
      </view>
      <view class="explain">
        <view>活动说明:</view>
        <view style="margin-top: 10rpx">{{ reactifyRrmark }}</view>
      </view>
    </scroll-view>

    <view class="member-footer">
      <view>
        <view>
          实付金额￥
          <text style="font-weight: 600">{{ depositMoney }}</text>
        </view>
        <view style="color: #f05f47">
          实际到账￥
          <text style="font-size: 40rpx">{{ amount }}</text>
        </view>
      </view>
      <view style="margin-top: 30rpx; font-size: 30rpx; width: 35%">
        <u-button
          @click="onRefill"
          style="color: #7d5a35"
          color="linear-gradient(to right, #edd2a0,#d5a967)"
          shape="circle"
          >立即充值</u-button
        >
      </view>
    </view>
  </view>
</template>

<script>
// import { refillPay } from "@/common/util.js";
export default {
  data() {
    return {
      isSelect: 0,
      balanceList: [],
      checkData: {},
      userInfo: {},
      couponList: [], // 赠送券列表
      reactifyRrmark: "",
    };
  },
  computed: {
    balance() {
      if (this.userInfo.balance) {
        return this.userInfo.balance.toFixed(2);
      } else {
        return 0.0;
      }
    },
    depositMoney() {
      if (this.checkData.depositMoney) {
        return this.checkData.depositMoney.toFixed(2);
      } else {
        return 0.0;
      }
    },
    amount() {
      if (this.checkData.amount) {
        return this.checkData.amount.toFixed(2);
      } else {
        return 0.0;
      }
    },
  },
  onShow() {
    this.getPageList(this.isSelect);
  },
  methods: {
    async getPageList(index) {},
    onCheck(item, index) {
      // 选中
      this.isSelect = index;
      this.checkData = item;
      this.couponList = item.couponList || [];
      this.reactifyRrmark = item.remark || "无";
    },
    onRefill() {
      console.log("充值");
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./scss/deposit.scss";
</style>
